<template>
  <div>
    <div class="page-title" style="width:100%">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <a @click="goToIndex()">接收任务列表</a>
        </el-breadcrumb-item>
        <el-breadcrumb-item>执行任务</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="page-content">
      <el-row>
        <el-col :span="8">
          <el-form label-width="100px" :inline="true" :model="filterQuery">
            <el-form-item label="开始日期：">
              <el-input v-model="filterQuery.startDate" readonly style="width:300px"></el-input>
            </el-form-item>
            <el-form-item label="结束日期：">
              <el-input v-model="filterQuery.endDate" readonly style="width:300px"></el-input>
            </el-form-item>
            <el-form-item label="检查人员：">
              <el-input v-model="filterQuery.execStaffName" readonly style="width:300px"></el-input>
            </el-form-item>
            <el-form-item label="轮次：">
              <el-input v-model="filterQuery.round" readonly style="width:300px"></el-input>
            </el-form-item>
            <el-row>
              <el-col :span="6">
                <el-form-item label="任务单："></el-form-item>
              </el-col>
              <el-col :span="18">
                <el-form-item>
                  <el-radio
                    v-model="filterQuery.taskList"
                    style="width:100%"
                    v-for="item in taskLists"
                    :key="item.id"
                    :value="item.taskType"
                    :label="item.taskType"
                    @change="changeTaskList"
                  >{{item.taskType}}</el-radio>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <el-row style="text-align:right;margin:20px">
            <el-button type="danger" @click="goToIndex()">返回上一页</el-button>
          </el-row>
        </el-col>
        <el-col
          :span="16"
          style="padding-left:10px; border-left: 2px dashed #dddddd;text-align:center"
        >
          <el-table
            :data="tableData"
            style="width: 100%"
            max-height="560"
            highlight-current-row
            border
            v-loading="loading"
          >
            <el-table-column label="检查项" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  @click="clickRowCheckItem(scope.row)"
                >{{scope.row.taskItem}}</el-button>
              </template>
            </el-table-column>
            <el-table-column
              prop="actuaInspectionTimes"
              label="实际检查数量"
              align="center"
              width="200px"
            ></el-table-column>
            <el-table-column
              prop="plannedInspectionTimes"
              label="计划检查数量"
              align="center"
              width="200px"
            ></el-table-column>
            <template slot="empty">
              <div>未选任务单，请选择任务单查询检查项！</div>
              <div>已选任务单，未显示数据，则该任务单无数据！</div>
            </template>
          </el-table>
        </el-col>
      </el-row>
      <el-dialog title="检查类别" :visible.sync="dialogVisible" width="400px" center>
        <el-row
          v-for="item in checkTypes"
          :key="item.id"
          style="margin-bottom:20px;text-align:center"
        >
          <el-button type="primary" @click="submit(item.label)" style="width:300px">{{item.label}}</el-button>
        </el-row>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { GetTaskManagement } from "../../../services/task_management";
// import { GetLoginPersonName, GetTaskTime} from '../../../services/cq_problem_entr.js';
import { GetTaskManagementDetail2 } from "../../../services/task_management";

export default {
  data() {
    return {
      taskLists: [],
      tableData: [],
      checkTypes: [
        { id: 1, label: "作业现场检查", value: "0001" },
        { id: 2, label: "驻地检查", value: "0002" }
      ],
      loading: false,
      filterQuery: {},
      dialogVisible: false,
      dataToNextPage: {},
      selectValue: "",
    };
  },
  mounted() {
    this.filterQuery =
      this.$route.params.taskRow ||
      JSON.parse(sessionStorage.getItem("executeTaskData"));
    this.tableData = JSON.parse(sessionStorage.getItem("executeTableData"));
    this.handleGetTaskDetail();
  },
  methods: {
    handleGetTaskDetail() {
      GetTaskManagementDetail2(this.filterQuery)
        .then(res => {
          this.dealTaskLists(res.data);
        })
        .catch(err => {
          this.$message.error(err.message);
        });
    },
    dealTaskLists(data) {
      data.forEach(item => {
        if (
          !this.taskLists.find(function(ele) {
            return ele.taskType === item.taskType;
          })
        ) {
          this.taskLists.push({ taskType: item.taskType, children: [] });
        }
        this.taskLists.find(function(ele) {
          if (ele.taskType === item.taskType) {
            ele.children.push(item);
          }
        });
      });
    },
    changeTaskList(selectValue) {
      this.selectValue = selectValue
      this.taskLists.forEach(item => {
        if (item.taskType === selectValue) {
          this.tableData = item.children;
        }
      });
    },
    clickRowCheckItem(row) {
      //console.log('selectValue',this.selectValue)
      if(this.selectValue !== '作业队') {
        //console.log('现场检查',this.selectValue)
        this.filterQuery.taskItem = row.taskItem;
        this.filterQuery.companyCode = row.companyCode;
        this.filterQuery.supervisionTaskDetail2ID = row.supervisionTaskDetail2ID;
        Object.assign(this.dataToNextPage, this.filterQuery);
        this.dataToNextPage.checkType = '现场检查';
        this.getCheckDate();
        //console.log(JSON.stringify(this.dataToNextPage));
        sessionStorage.setItem(
        "executeTaskData",
        JSON.stringify(this.dataToNextPage)
        );
        sessionStorage.setItem(
        "executeTableData",
        JSON.stringify(this.tableData)
        );
        this.$router.push({ name: "SceneCheck", params: this.dataToNextPage });
      }
      else {
        this.dialogVisible = true;
        this.filterQuery.taskItem = row.taskItem;
        this.filterQuery.companyCode = row.companyCode;
        this.filterQuery.supervisionTaskDetail2ID = row.supervisionTaskDetail2ID;
      }
    },
    getCheckDate() {
      let date = new Date();
      let month =
        date.getMonth() < 9 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
      let day = date.getDate() <= 9 ? "0" + date.getDate() : date.getDate();
      this.dataToNextPage.checkDate =
        date.getFullYear() + "-" + month + "-" + day;
    },
    submit(clickValue) {
      Object.assign(this.dataToNextPage, this.filterQuery);
      this.dataToNextPage.checkType = clickValue;
      this.getCheckDate();
      console.log(JSON.stringify(this.dataToNextPage));
      sessionStorage.setItem(
        "executeTaskData",
        JSON.stringify(this.dataToNextPage)
      );
      sessionStorage.setItem(
        "executeTableData",
        JSON.stringify(this.tableData)
      );
      if (clickValue === "作业现场检查") {
        this.$router.push({ name: "SceneCheck", params: this.dataToNextPage });
      }
      if (clickValue === "驻地检查") {
        this.$router.push({
          name: "ResidentStationCheck",
          params: this.dataToNextPage
        });
      }
    },
    loaddata(filterQuery) {
      GetTaskManagement(filterQuery).then(res => {
        this.tableData = res.data;
      });
    },
    goToIndex() {
      sessionStorage.removeItem("executeTaskData");
      sessionStorage.removeItem("executeTableData");
      this.$router.go(-1);
    }
  }
};
</script>

<style scoped>
</style>